import React, { Component } from "react"
import { Card, Table, Button, Space, Tag, Switch,Modal } from 'antd'
import moment from "moment";
import { connect } from 'react-redux';
import * as actions from './store/action';
import MenuModal from './MenModal/MenuModal'
import { DeleteOutlined, EditOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
class MyMenu extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pageIndex: 1,//页码
            pageSize: 1,//每页显示条数
            actionType: 1,//新增:1、编辑:2、查看:3、删除:4
            modalVisible: false,//新增和编辑弹框
            selectedRowKeys: [], // 存储删除多个信息的key的数组
        }
        this.columns = [
            {
                title: '序号',
                align: 'center',
                render: (text, record, index) => {
                    return (this.state.pageIndex - 1) * this.state.pageSize + index + 1
                }
            },
            {
                title: '菜品名称',
                dataIndex: 'menuName',
                align: 'center'
            },
            {
                title: '菜品类别',
                dataIndex: 'dshclassification',
                align: 'center',
                render: (record) => {
                    const statuss = {
                        true: <Tag color='green'>素菜</Tag>,
                        false: <Tag color='red'>荤菜</Tag>,
                    }
                    return statuss[record]
                }
            },
            {
                title: '菜品单价(元)',
                dataIndex: 'price',
                align: 'center'
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                align: 'center',
                render: (text) => {
                    return moment(text).format("YYYY-MM-DD HH:SS");
                },
            },
            {
                title: '是否下架',
                dataIndex: 'isSticky',
                align: 'center',
                render: (text, record) => {
                    return (
                        <div>
                            <Space>
                                <Switch
                                    checkedChildren="否"
                                    unCheckedChildren="是"
                                    defaultChecked={record.isSticky}
                                    onClick={() => this.showDatas(record)}
                                />
                            </Space>
                        </div>
                    )
                }
            },
            {
                title: '是否推荐',
                dataIndex: 'isRecommend',
                align: 'center',
                render: (text, record) => {
                    return (
                        <div>
                            <Space>
                                <Switch
                                    checkedChildren="是"
                                    unCheckedChildren="否"
                                    defaultChecked={record.isRecommend}
                                    onClick={() => this.isRecommend(record)}
                                />
                            </Space>
                        </div>
                    )
                }
            },
            {
                key: 8,
                title: '操作',
                dataIndex: 'operation',
                align: 'center',
                render: (text, record) => {
                    return (
                        <Space>
                            <Button
                                size="small"
                                type='primary'
                                ghost
                                onClick={() => { this.setState({ actionType: 3, modalVisible: true, renderData: record }) }}
                            >
                                查看详情
                            </Button>
                            <Button
                                size="small"
                                type='primary'
                                icon={<EditOutlined />}
                                ghost
                                onClick={() => { this.setState({ actionType: 2, modalVisible: true, renderData: record }) }}
                            >
                                编辑
                            </Button>
                            <Button
                                size="small"
                                type='primary'
                                icon={<DeleteOutlined />}
                                ghost
                                danger
                                onClick={() => this.deleteDatas([record.key])}
                            >
                                删除
                            </Button>
                        </Space >
                    )
                }
            }
        ];  
    }
    componentDidMount() {
        this.props.getAllMenuRequest()
    }
    //是否售卖
    showDatas = (record) => {
        const obj = {
            id: record.id,
            type:"isSticky"
        }
        this.props.getOptionRequest(obj);
    }
    //热卖推荐
    isRecommend = (record) => {
        const obj = {
            id: record.id,
            type: "isRecommend"
        }
        this.props.getOptionRequest(obj);
    }
    render() {
        const rowSelection = {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.changeSelectedRowKeyss,
        }
        const {actionType,modalVisible}=this.state
        return (
            <Card
                title={
                     <Button type='primary'
                            ghost onClick={() => {
                                this.setState({ actionType: 1, modalVisible: true })
                            }}><PlusOutlined />
                            录入菜单
                        </Button>
                }
                extra={
                    <Button danger 
                        onClick={() => this.batchDelete()}
                        disabled={this.state.selectedRowKeys.length == 0 ? true : false} 
                        style={{ marginTop: "10px" }} 
                    ><DeleteOutlined />
                    批量删除
                    </Button>
                }
                bordered={false}
            >
                <Table
                    columns={this.columns}
                    rowSelection={rowSelection}
                    bordered={true}
                    dataSource={this.props.getAllMenu}
                    pagination={{
                        onChange: page => {
                            this.setState({
                                pageIndex: page
                            })
                        },
                        pageSize: 5
                    }}
                />
                <Modal
                    title={actionType === 1 ? '录入菜单' : '编辑菜品信息'}
                    visible={modalVisible}
                    onCancel={() => { this.setState({ modalVisible: false }) }}
                    footer={null}
                    destroyOnClose
                    getContainer={false}
                    width={450}

                >
                    <MenuModal
                        closeModal={this.closeModal}
                        actionType={actionType}
                    />
                </Modal>
            </Card>
        );
    }
    // 批量选中多个数据时存储的key数组
    changeSelectedRowKeyss = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys

        })
    }
    //批量删除
    batchDelete = () => {
        const { selectedRowKeys } = this.state;
        confirm({
            title: '是否删除被选中的菜品',
            icon: <ExclamationCircleOutlined />,
            onOk: () => {
                if (selectedRowKeys.length !== 0) {
                    const obj = {
                        idList: selectedRowKeys
                    }
                    this.props.deleteMenuRequest(obj)
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //删除单挑数据
    deleteDatas = (keyArr) => {
        confirm({
            title: '是否删除被选中的菜品',
            icon: <ExclamationCircleOutlined />,
            onOk: () => {
                this.props.deleteMenuRequest(keyArr)
            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }
    //关闭弹簧
    closeModal = () => {
        this.setState({
            modalVisible:false
        })
    }
}
const mapStateToProps = (state) => ({
    // 获取所菜单信息
    getAllMenu: state.menuConfig.getAllMenu,
})

const mapDispatchToProps = dispatch => ({
    
    // 获取所有数据
    getAllMenuRequest(values) {
        dispatch(actions.getAllMenuRequest(values))
    },
    //操作
    getOptionRequest(value) {
        dispatch(actions.getOptionRequest(value))
    },
    deleteMenuRequest(value) {
        dispatch(actions.deleteMenuRequest(value))
    },
    
})
export default connect(mapStateToProps, mapDispatchToProps)(MyMenu);
